<template>
  <div>
    <el-dialog title="修改课程" :visible.sync="upCourseBtn" width="40%" :before-close="handleClose">
      <el-form ref="courseDataTemp" :model="courseDataTemp" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="课程名称">
              <el-input v-model="courseDataTemp.name" placeholder="输入课程名称"></el-input>
            </el-form-item>
            <el-form-item label="课程课时">
              <el-input v-model="courseDataTemp.periods" placeholder="输入课程课时"></el-input>
            </el-form-item>
            <el-form-item label="课程学分">
              <el-input v-model="courseDataTemp.credit" placeholder="输入课程学分"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="img-shell">
              <el-image class="img" :src="courseDataTemp.coverFilePath"  fit="full">
                <div slot="error" class="image-slot">
                  <el-image :src="defaultImg"  fit="full"></el-image>
                </div>
              </el-image>
              <div class="img-btn-shell">
                <el-button class="img-btn" type="primary" @click="UpImgOn">更换图片</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-form-item class="form-notes" label="备注">
          <el-input type="textarea" v-model="courseDataTemp.notes"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancellation">取 消</el-button>
        <el-button type="warning" @click="DelData">删 除 </el-button>
        <el-button type="primary" @click="UpData">修 改</el-button>
      </span>
      <addCover :addCovBtn="addCovBtn" :nowImg="courseDataTemp.coverFilePath" @offAddCov="offAddCov"></addCover>
    </el-dialog>
  </div>
</template>

<script>
import {deleteCourse, upCourse, uploadCover} from "@/api/system/course";
import course_cover from '../../../assets/images/course-cover.png'
import addCover from "@/views/system/course/addData/addCover.vue";
export default {
  //组件区
  components:{addCover},
  //变量区
  data(){
    return{
      courseDataTemp:{
        id:null,
        name:null,//课程名称
        coverFilePath:"",//课程封面文件地址
        topicSwitch:false,//题目开关
        groupingSwitch:false,//分组开关
        annexSwitch:false,//附件开关
        notes:null,//备注
        credit:null,//学分
        periods:null,//课时
      },
      //默认课程封面
      defaultImg:course_cover,
      //封面数据暂存
      imgFormTemp:0,
      //添加封面对话框开关
      addCovBtn:false,
    }
  },
  //父组件传递的变量
  props: {
    upCourseBtn:Boolean,
    course:Object,
  },
  //监听变量的变化
  watch: {
    //逻辑入口 数据变化，父组件触动
    upCourseBtn(newValue){
      this.courseDataTemp={
        id:this.course.courseId,
        name:this.course.courseName,
        notes:this.course.notes,
        coverFilePath:this.course.headImg,//课程封面文件地址
        credit:this.course.credit,//学分
        periods:this.course.periods,//课时
      }
    }
  },
  //函数区
  methods: {
    /**重置表单*/
    result(){
      this.courseDataTemp= {};
      this.imgFormTemp=0;
    },
    /**打开封面对话框*/
    UpImgOn(){
      this.addCovBtn=true;
    },
    /**关闭封面对话框*/
    offAddCov(newValue){
      this.addCovBtn=newValue.btn;
      this.courseDataTemp.coverFilePath=newValue.img;
      if(newValue.imgdata){
        this.imgFormTemp={
          data:newValue.imgdata,
          name:newValue.imgname,
        }
      }
    },
    /**删除课程*/
    DelData(){
      deleteCourse(this.courseDataTemp.id).then(res=>{
        let data={
          btn:false,
          isdel:true,
        }
        this.$emit('offUpCourse', data);
        this.$modal.msgSuccess("课程已删除");
      })
    },
    //关闭对话框确认框
    handleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          let data={
            btn:false,
            isdel:false,
          }
          this.$emit('offUpCourse', data);
        })
        .catch(_ => {});
    },
    //取消对话框
    cancellation(){
      let data={
        btn:false,
        isdel:false,
      }
      this.$emit('offUpCourse', data);
    },
    //确定对话框
    UpData(){
      let data={
        "content": this.courseDataTemp.notes,
        "courseId": this.courseDataTemp.id,
        "courseName": this.courseDataTemp.name,
        "periods": this.courseDataTemp.periods,
        "credit":this.courseDataTemp.credit,
      }
      upCourse(data).then(res=>{
        if(this.imgFormTemp!==0){
          this.AddDataCover(res.data.courseId);
        }else{
          this.$modal.msgSuccess("修改课程成功");
          let data={
            btn:false,
            isdel:false,
          }
          this.$emit('offUpCourse', data);
        }
      })
    },
    //添加课程封面
    AddDataCover(courseId){
      let formData = new FormData();
      formData.append("imgfile", this.imgFormTemp.data, this.imgFormTemp.name);
      formData.append("id",courseId);
      uploadCover(formData).then(response => {
        this.result();
        this.$modal.msgSuccess("修改课程成功");
        let data={
          btn:false,
          isdel:false,
        }
        this.$emit('offUpCourse', data);
      });
    },
  },
}
</script>

<style scoped>
.img-shell{
  display: flex;
  justify-content: center;
  position: relative;
}
.img{
  width: 60%;
  aspect-ratio:1/1;
  border: 1px solid rgb(198, 198, 201);
  border-radius: 3%;

}
.img-btn-shell{
  position: absolute;
  width: 60%;
  aspect-ratio:1/1;
  display: flex;
  .img-btn{
    display: none;
  }
}
.img-btn-shell:hover{
  position: absolute;
  width: 60%;
  aspect-ratio:1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  .img-btn{
    display: flex;
  }
}
.form-notes{
  width: 95%;
}
</style>
